<template>
  <div class="app-container">
    <br>
    <br>
    <el-table
      class="no-margin-table"
      :cell-style="tableCellStyle"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
    >
      <el-table-column label="库房名称" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.drugDepositoryName }}
        </template>
      </el-table-column>
      <el-table-column label="查看/查询" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.queryInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 1)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.queryInfo.addReqDto">
            <el-select v-model="scope.row.queryInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.queryInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.queryInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.queryInfo, scope.row.drugDepositoryId, 1)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="销售" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.sellInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 2)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.sellInfo.addReqDto">
            <el-select v-model="scope.row.sellInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.sellInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.sellInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.sellInfo, scope.row.drugDepositoryId, 2)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="入库" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.inputInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 3)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.inputInfo.addReqDto">
            <el-select v-model="scope.row.inputInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.inputInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.inputInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.inputInfo, scope.row.drugDepositoryId, 3)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="出库" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.outputInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 4)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.outputInfo.addReqDto">
            <el-select v-model="scope.row.outputInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.outputInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.outputInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.outputInfo, scope.row.drugDepositoryId, 4)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="盘点" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.checkInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 5)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.checkInfo.addReqDto">
            <el-select v-model="scope.row.checkInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.checkInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.checkInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.checkInfo, scope.row.drugDepositoryId, 5)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="核销" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.writeOffInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 6)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.writeOffInfo.addReqDto">
            <el-select v-model="scope.row.writeOffInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.writeOffInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.writeOffInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.writeOffInfo, scope.row.drugDepositoryId, 6)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="采购" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.purchaseInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 7)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.purchaseInfo.addReqDto">
            <el-select v-model="scope.row.purchaseInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.purchaseInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.purchaseInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.costPriceInfo, scope.row.drugDepositoryId, 7)">添加</el-button>
        </template>
      </el-table-column>
      <el-table-column label="成本价填写" width="460" align="center">
        <template slot-scope="scope">
          <el-table
          class="no-margin-table"
            v-loading="listLoading"
            :data="scope.row.costPriceInfo"
            element-loading-text="Loading"
            border
            fit
          >
          <el-table-column label="部门-职务" width="150" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.deptName + '-' + scope2.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="在职人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByJobDuty }}
            </template>
          </el-table-column>
          <el-table-column label="权限人数" width="100" align="center">
            <template slot-scope="scope2">
              {{ scope2.row.countUserByAuth }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope2">
              <el-button type="danger" size="mini" @click="clickRemove(scope.row.drugDepositoryId, scope2.row.id, 8)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <div style="display: flex;flex-direction: row;justify-content: left;" v-if="scope.row.costPriceInfo.addReqDto">
            <el-select v-model="scope.row.costPriceInfo.addReqDto.deptId" placeholder="选择部门" >
              <el-option
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectDept(item.id)"
                >
              </el-option>
            </el-select>
            <el-select v-model="scope.row.costPriceInfo.addReqDto.jobDutyId" placeholder="选择企业职务" >
              <el-option
                v-for="item in jobDutyEnum"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="selectJobDuty(scope.row.costPriceInfo.addReqDto)"
                >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" size="small" @click="clickAdd(scope.row.costPriceInfo, scope.row.drugDepositoryId, 8)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="->, total, prev, pager, next"
      :total="this.total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="clickCurPage"
      >
    </el-pagination>
  </div>
</template>

<script>
import { getList, getInfo, addorupdate, del } from '@/api/purchaseOrder'
import { getList as getDeptList } from '@/api/dept'
import { getListByDeptId } from '@/api/jobDuty'
import { audit, getList as getAuditList, getInfo as getAuditInfo } from '@/api/auditFlow'
import { getList as getDrugDepositoryAuthList, del as delDrugDepositoryAuth, add as addDrugDepositoryAuth } from '@/api/drugDepositoryAuth'

export default {
  name: "DrugDepositoryAuth",
  filters: {
    statusColorFilter(status) {
      const statusMap = ['success', 'warning', 'primary', 'danger']
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = ['草稿', '待审批', '审批完成', '已拒绝']
      return statusMap[status]
    }
  },
  data() {
    const validatePlan = (rule, value, callback) => {
      if (!value) callback(new Error('请填写计划名称')) 
      else callback()
    }
    const validateType = (rule, value, callback) => {
      if (!value) callback(new Error('请选择类型'))
      else callback()
    }
    const validateDept = (rule, value, callback) => {
      if (!this.form.applyDepository) callback(new Error('请选择库'))
      else callback()
    }
    const validateSupplier = (rule, value, callback) => {
      if (!this.form.supplier) callback(new Error('请选择供货商'))
      else callback()
    }
    const validateAuditPreset = (rule, value, callback) => {
      for (let index = 0; index < this.auditPreset.length; index++) {
        if(!this.auditPreset[index].auditUser) callback(new Error('请选择审批人'))
      }
      callback()
    }
    return {
      list: null,
      listLoading: true,
      toUpdateBtnLoading: false,
      toInfoBtnLoading: false,
      commitBtnLoading: false,
      currentPage: 1,
      pageSize: 10,
      total: 20,
      curIndex: -1,
      infoVisible: false,
      formVisible: false,
      dialogTitle: '',
      info: {},
      form: {},
      purchaseOrderList: [],
      typeEnum: ["集中", "临时"],
      depositoryEnum: [],
      suppliers: [],
      query: {},
      tagEnum: [{id: 1, name: '热销'},{id: 2, name: '促销'}],
      dugTypeTreeList: [],
      formRules: {
        plan: [{ required: true, trigger: 'blur', validator: validatePlan }],
        type: [{ required: true, trigger: 'blur', validator: validateType }],
        dept: [{ required: true, trigger: 'blur', validator: validateDept }],
        supplier: [{ required: true, trigger: 'blur', validator: validateSupplier }],
        auditPreset: [{ required: true, trigger: 'blur', validator: validateAuditPreset }],
      },
      searchValue: '',
      auditPreset: [],
      depts: [],
      jobDutyEnum: [],
      addReqDto: {},
    }
    
  },
  created() {
    this.fetchData()
  },
  computed: {
    tableCellStyle() {
      return {
        // textAlign: 'center', // 文本居中对齐
        padding: 0,
        margin: 0,
      };
    },
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getDrugDepositoryAuthList().then(response => {
        console.log(response)
        this.list = response.data
        this.listLoading = false
      })
      getDeptList().then(deptRes=>{
        console.log("depts: ", deptRes.data)
        this.depts = deptRes.data
      })
    },
    clickCurPage(val){
      this.currentPage = val
      this.fetchData()
    },
    add() {
      this.$router.push({ path: '/store/purchasePage' })
    },
    getInfo(row) {
      this.$router.push({name: "PurchasePage", params: row});
    },
    deleteInfo(scope) {
      this.$confirm('确定删除该职务?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(scope.row.id).then(res=>{
          this.list.splice(scope.$index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(err=>{
          console.log(err)
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    confirm(type) {
      this.commitBtnLoading = true
      this.form.auditUserIds = this.auditPreset.map(jobDutyVo => Number(jobDutyVo.auditUser))
      console.log(this.form)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.listLoading = true
          this.form.status = type
          addorupdate(this.form).then(res=>{
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.commitBtnLoading = false
            this.formVisible = false
            this.listLoading = false
            this.$tab.refreshPage({path: '/store/drugDepositoryAuth', name: "DrugDepositoryAuth"});
          }).catch(err=>{
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          this.commitBtnLoading = false
          return false
        }
      })
    },
    cancel() {
      this.infoVisible = false
      this.formVisible = false
    },
    reset(){
      this.form = {}
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    approve(row, pass) {
      console.log(row)
      this.toUpdateBtnLoading = true
      audit({flowNo: row.code, pass: pass}).then(auditRes=> {
        console.log("auditRes", auditRes)
        this.toUpdateBtnLoading = false
        this.fetchData()
      })
    },
    toCopy(row) {
      getInfo(row.id).then(infoRes=>{
        console.log(infoRes)
        this.form = infoRes.data
        this.form.id = undefined
        this.form.status = 0
        this.form.purchaseOrderDrugList.forEach(purchase=>{
          purchase.godownDrugList = []
        })
        this.formVisible = true
      })
    },
    checkMin(drug) {
      if(drug.num < drug.minPurchaseNum) {
        this.$message.error('低于最低采购量,已自动计算');
        drug.num = drug.minPurchaseNum
      }
    },
    selectAuditUser() {

    },
    clickRemove(drugDepositoryId, jobDutyId, optType) {
      delDrugDepositoryAuth({drugDepositoryId, jobDutyId, optType}).then(res=> {
        console.log(res)
        this.listLoading = true
        getDrugDepositoryAuthList().then(response => {
          console.log(response)
          this.list = response.data
          this.listLoading = false
        })
      })
    },
    selectDept(deptId) {
      this.addReqDto = undefined
      getListByDeptId({deptId: deptId}).then(res=> {
        console.log(res)
        this.jobDutyEnum = res.data
      })
    },
    clickAdd(info, drugDepositoryId, optType) {
      console.log(info)
      var addReqDto = {
        drugDepositoryId,
        optType
      }
      this.$set(info, 'addReqDto', addReqDto)
    },
    selectJobDuty(addReqDto) {
      console.log("addReqDto", addReqDto)
      addDrugDepositoryAuth(addReqDto).then(res=> {
        console.log(res)
        this.listLoading = true
        getDrugDepositoryAuthList().then(response => {
          console.log(response)
          this.list = response.data
          this.listLoading = false
        })
      })
    }
  }
}

</script>

<style>
.no-margin-table .el-table__row {
  margin: 0;
  padding: 0;
}
</style>